/**
 * 学习目标：评论列表练习
 */
import React from 'react';
import ReactDOM from 'react-dom';
import './base.css';

const list = [
  // { id: 1, name: '刘德华', content: '给我一杯忘情水' },
  // { id: 2, name: '五月天', content: '不打扰，是我的温柔' },
  // { id: 3, name: '毛不易', content: '像我这样优秀的人' },
];

// 1. 列表渲染 : 数组的map方法

// 2. 导入样式文件, 分配类名

const liNodes = list.map((item) => {
  return (
    <li key={item.id}>
      <h3>{item.name}</h3>
      <p>{item.content}</p>
    </li>
  );
});

const divNode = (
  // 3. 条件渲染
  <div>{list.length ? <ul className="list">{liNodes}</ul> : <div>暂无数据</div>}</div>
);

ReactDOM.render(divNode, document.getElementById('root'));
